<template>
  <div class="box">
<<<<<<< HEAD
    <div class="content" id="content" style='width:100%; overflow:auto'>
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
        <div class="top">
          <!-- <img class='imgbrand' src="https://h2a.appsimg.com/a.appsimg.com/upload/flow/2020/03/31/62/15856261851188.jpg" alt=""> -->
          <van-swipe class='imgbrand' :autoplay="3000" indicator-color="white">
            <van-swipe-item v-for="(image, index) in images" :key="index">
              <img class='imgbrand' v-lazy="image" />
            </van-swipe-item>
          </van-swipe>
          <div class="top-img">
            <img src="https://h2a.appsimg.com/a.appsimg.com/upload/flow/2020/03/31/119/15856263077424.jpg" alt="">
            <img src="https://h2a.appsimg.com/a.appsimg.com/upload/flow/2020/03/31/28/15856264578984.jpg" alt="">
            <img src="https://h2a.appsimg.com/a.appsimg.com/upload/flow/2020/03/31/180/15856285203322.jpg" alt="">
          </div>
          <img class='imgzp' src="https://h2a.appsimg.com/a.appsimg.com/upload/flow/2020/03/04/173/15833184013192.jpg!85.webp" alt="">
        </div>
        <div class="home-catagory" style="background-color: yellow">
          <van-grid :column-num="5" :gutter="0">
            <van-grid-item  v-for="item of listData" :key='item.listid'>
              <van-image :src="item.img" />
              <p class="ptitle">{{ item.alt }}</p>
            </van-grid-item>
          </van-grid>
        </div>
        <div class="wpkq" style="position:relative">
          <img style="width:100%; height:250px; " src="https://h2.appsimg.com/b.appsimg.com/upload/mst/2020/03/16/90/mst_3ef8e5f0d6402882ebecbd0e913b78a1_750x440_90.png" alt="">
          <div class="fqiang1">
            <img class="fqmg1" src="https://h2.appsimg.com/a.appsimg.com/upload/merchandise/pdcvop/00100976/10001160/492755467-466199181859594240-466199181859594242-5_224x224_90.jpg" alt="">
            <img class="fqmg2" src="https://h2.appsimg.com/a.appsimg.com/upload/brandcool/0/5ca33627123f4a8d9768df602baee3fc/10001160/black_110x55_90.png" alt="">
            <span  class="span1">共6367款</span>
            <p><span>疯抢价</span><i>￥ 78</i></p>
          </div>
          <div class="fqiang2">
            <img class="fqmg1" src="https://h2.appsimg.com/a.appsimg.com/upload/merchandise/pdcvis/2020/01/15/153/1fc1557f-6d48-4130-94ae-cd8468790c76_224x224_90.jpg" alt="">
            <img  class="fqmg2" src="https://h2.appsimg.com/a.appsimg.com/upload/brandcool/0/ae937994e3084557a59f67dea1c0400e/10006741/black_110x55_90.png" alt="">
            <span  class="span1">共803款</span>
            <p><span>疯抢价</span><i>￥ 52</i></p>
          </div>
          <div class="fqiang3">
            <img class="fqmg1" src="https://h2.appsimg.com/a.appsimg.com/upload/merchandise/pdcvis/2019/03/04/194/ca68ec00-110d-4fd8-8f93-ae0df5275aaf_224x224_90.jpg" alt="">
            <img class="fqmg2" src="https://h2.appsimg.com/a.appsimg.com/upload/brandcool/0/6b0d6d8d8fdf436cbf68f6d997003802/10003447/black_110x55_90.png" alt="">
            <span class="span1">共438款</span>
            <p style=" text-align: center;"><span>疯抢价</span><i>￥ 149</i></p>
          </div>
          <img style='width:100%;height:58px' src="https://h2.appsimg.com/b.appsimg.com/upload/momin/2019/08/23/111/1566543733364.jpg" alt="">
        </div>
=======
    <header class="header">
      <van-nav-bar>
        <div slot="left">
          <van-icon name="wap-nav" size="28" @click="$router.push('/kind')" />
        </div>
        <van-search disabled @click="gosearch" slot="title" placeholder="请输入搜索关键词" />
        <div slot="right">
          <div style="color:#333">登录</div>
          <van-icon @click="$router.push('/user')" name="https://b.yzcdn.cn/vant/icon-demo-1126.png" size="28" />
        </div>
      </van-nav-bar>
    </header>
    <div class="content" id="content">
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item v-for="item of bannerlist" :key="item.bannerid">
            <!-- <img v-lazy="item.img"> -->
            <van-image
              lazy-load
              :src="item.img"
            />
          </van-swipe-item>
        </van-swipe>
        <h2>热推</h2>
        <Hotlist :prolist="hotlist"></Hotlist>
        <h2>全部产品</h2>
>>>>>>> 61d95511f5bb548966870409910cdf315f439697
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
<<<<<<< HEAD
          <ul class="showlist">
            <div>
              <!-- <router-link :to='`/detail/${ item.showid }`' tag='li' class="proitem" v-for='item of prolist' :key='item.showid'>
                <div class="itemimg">
                  <img :src="item.img" alt="">
                </div>
                <div class="itemifo">
                  <div><h4>{{ item.title }}</h4>{{ item.countdown }}</div>
                  <div class="price">{{ item.newgoods }} {{ item.discount }}折起 <span>{{ item.desc }}</span></div>
                </div>
              </router-link> -->
              <router-link to='/list' tag='li' class="showitem" v-for='item of showlist' :key='item.showid'>
                <div class="itemimg">
                  <img :src="item.img" alt="">
                </div>
                <div class="itemifo">
                  <div class="info1"><h4>{{ item.title }}</h4>{{ item.countdown }}</div>
                  <div class="info2"><i :class="item.newgoods ? 'ihas' : ''">{{ item.newgoods }}</i> <b>{{ item.discount }}折起</b> <span>{{ item.desc }}</span></div>
                </div>
              </router-link>
            </div>
          </ul>
        </van-list>
      </van-pull-refresh>
      <div class="cart" @click="$router.push('/cart')">
        <van-icon name="shopping-cart-o" size="30" color="#fff"/>
      </div>
      <div class="uptop" @click="uptop" v-if='flag'>
        <van-icon name="arrow-up" size="30" color="#fff"/>
=======
          <Prolist :prolist="prolist"></Prolist>
        </van-list>
      </van-pull-refresh>
      <div class="backtop" v-if="flag" @click="backtop">
        <van-icon name="upgrade" size="36"/>
>>>>>>> 61d95511f5bb548966870409910cdf315f439697
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
<<<<<<< HEAD
import { getlisttype, getshowlist } from '@/api/index'
import { Grid, GridItem, Image, List, PullRefresh, Icon, Swipe, SwipeItem, Lazyload } from 'vant'

Vue.use(Grid)
Vue.use(GridItem)
Vue.use(Image)
Vue.use(List)
Vue.use(PullRefresh)
Vue.use(Icon)
Vue.use(Swipe)
Vue.use(SwipeItem)
Vue.use(Lazyload)

export default {
  data () {
    return {
      listData: [],
      showlist: [],
      images: [
        'https://h2a.appsimg.com/a.appsimg.com/upload/flow/2020/03/30/124/15855694315702.jpg!85.webp',
        'https://h2a.appsimg.com/a.appsimg.com/upload/flow/2020/03/31/62/15856261851188.jpg',
        'https://h2a.appsimg.com/a.appsimg.com/upload/flow/2020/04/01/175/15857109805183.jpg!85.webp'
      ],
      count: 1, // 默认是0页，所以请求就从第一页开始
      finished: false,
      loading: false,
      isLoading: false,
      flag: false
    }
  },
  mounted () {
    getlisttype().then(res => {
      this.listData = res.data.data
    })
    getshowlist().then(res => {
      this.showlist = res.data.data
      // 数据填充完毕 -- 监听 、 绑定 滚轮滚动事件
=======
import { Swipe, SwipeItem, Lazyload, Image, NavBar, Search, List, PullRefresh, Icon } from 'vant'
import { getProlist, getBannerlist } from '@/api'
import Prolist from '@/components/prolist'
import Hotlist from '@/components/hotlist'
Vue.use(Swipe) // Vue.use - 注册的组件
Vue.use(SwipeItem) // Vue.use - 注册的组件
Vue.use(Lazyload) // Vue.use - 注册的组件
Vue.use(Image) // Vue.use - 注册的组件
Vue.use(NavBar) // Vue.use - 注册的组件
Vue.use(Search) // Vue.use - 注册的组件
Vue.use(List) // Vue.use - 注册的组件
Vue.use(PullRefresh) // Vue.use - 注册的组件
Vue.use(Icon) // Vue.use - 注册的组件
export default {
  data () {
    return {
      hotlist: [],
      prolist: [],
      bannerlist: [],
      loading: false,
      finished: false,
      isLoading: false,
      flag: false, // 返回顶部出现标识
      count: 1 // 默认会添加第0页的数据，从1开始
    }
  },
  components: {
    Prolist,
    Hotlist
  },
  mounted () {
    getBannerlist().then(res => {
      this.bannerlist = res.data.data
    })
    getProlist().then(res => {
      console.log(res.data)
      // 拿到数据渲染热推产品不在一起
      // this.prolist = res.data.data
      // 处理数据，根据产品的flag字段排序
      // res.data.data.sort((a, b) => {
      //   return b.flag - a.flag
      // })
      this.prolist = res.data.data
      const arr = res.data.data.filter(item => {
        return item.flag === 1
      })
      this.hotlist = arr
      // 数据填充完毕 -- 监听、绑定滚轮滚动事件
>>>>>>> 61d95511f5bb548966870409910cdf315f439697
      document.getElementById('content').addEventListener('scroll', this.handleScroll, false)
    })
  },
  methods: {
<<<<<<< HEAD
    // 上啦加载
    onLoad () {
      this.loading = true // 开始加载
      // 请求数据
      getshowlist({ limit: 5, count: this.count }).then(res => {
        this.loading = false // 加载结束
        if (res.data.len === 0) { // res.data的对象里有len的一个key
          this.finished = true // 加载完毕
        } else {
          this.showlist = [...this.showlist, ...res.data.data] // 拼接刷新的数据进去重新渲染页面
          this.count += 1 // 使请求的页码加一
        }
      })
    },
    // 下拉刷新
    onRefresh () {
      this.isLoading = true // 开始下拉刷新
      // 请求数据
      getshowlist().then(res => {
        this.isLoading = false // 刷新结束
        this.showlist = res.data.data
        this.count = 1 // 冲设置count
        this.finished = false // 重置finished的值
      })
    },
    // 滚动事件
    handleScroll () {
      const scrollTop = document.getElementById('content').scrollTop
      // console.log(scrollTop)
      if (scrollTop > 500) { // 滚动超过200顶部按钮出现，否则消失
=======
    backtop () {
      document.getElementById('content').scrollTop = 0
    },
    handleScroll () {
      console.log('滚动')
      // 获取滚动条滚动的距离
      const scrollTop = document.getElementById('content').scrollTop
      // 判定返回顶部是不是要出现
      if (scrollTop > 500) {
>>>>>>> 61d95511f5bb548966870409910cdf315f439697
        this.flag = true
      } else {
        this.flag = false
      }
    },
<<<<<<< HEAD
    // 回到顶部
    uptop () {
      // 要实现底部箭头随滚动出现需要监听滚动的事件
      document.getElementById('content').scrollTop = 0
=======
    onRefresh () {
      console.log('下拉刷新')
      this.isLoading = true
      getProlist().then(res => {
        this.isLoading = false // 刷新结束
        // 重置列表数据
        this.prolist = res.data.data
        // 重置页面以及finished的值
        this.count = 1
        this.finished = false
      })
    },
    onLoad () {
      console.log('可以加载数据了')
      this.loading = true // 表示开始加载了
      getProlist({ limit: 10, count: this.count }).then(res => {
        this.loading = false // 表示结束加载了
        // 如果没有数据
        if (res.data.len === 0) { // res.data.data.length
          this.finished = true // 表示数据加载完毕了
        } else {
          // 有数据 拼接数据 --- 合并数组
          // concat [...this.prolist, ...res.data.data]
          this.prolist = [...this.prolist, ...res.data.data]
          // 页面加1
          this.count += 1
        }
      })
    },
    gosearch () {
      console.log('去搜索页面')
      // 编程式跳转页面
      this.$router.push('/search')
>>>>>>> 61d95511f5bb548966870409910cdf315f439697
    }
  }
}
</script>

<style lang="scss">
<<<<<<< HEAD
@import '@/lib/reset.scss';
.imgbrand{
  width: 100%;
  height: 150px;
}
.top-img{
  display: flex;
  justify-content: space-between;
  img{
    width: 125px;
    height: 140px;
  }
}
.imgzp{
  width: 100%;
  height: 40px;
}
.ptitle{
  position: absolute;
  top: 62px;
  font-size: 14px;
}
.fqiang1{
  height: 180px;
  width: 112px;
  position: absolute;
  top:70px;
  left:15px;
  margin-right:5px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.fqiang2{
  height: 180px;
  width: 112px;
  position: absolute;
  top:70px;
  left:132px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.fqiang3{
  height: 180px;
  width: 112px;
  position: absolute;
  top:70px;
  left:249px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.fqmg1{
  width: 112px;
  height: 112px;
  // margin-bottom: 30px;
}
.fqmg2{
  width: 55px;
  height: 27px;
  position: absolute;
  left: 50%;
  top:100px;
  z-index: 2;
  background-color: #fff;
  margin-left:-27.5px;
}
.span1{
  font-size: 12px;
  text-align: center;
}
.showlist {
  .showitem {
    @include rect(100%, 246.5px);
    @include box-sizing(border-box);
    @include flexbox();
    @include flex-direction(column);
    align-items: center;
    .itemimg {
      @include rect(350px, 168px);
      img {
        @include rect(100%, 100%);
        @include border(1px, #ccc, solid);
        @include box-sizing(border-box);
        @include display(block);
      }
    }
    .itemifo {
      @include flex();
      @include flexbox();
      @include flex-direction(column);
      justify-content: center;
      width: 350px;
      .info1 {
        @include rect(100%, 17px);
        font-size: 14px;
        @include flexbox();
        justify-content: space-around;
        color: rgb(88, 92, 100);
        margin-bottom: 8px;
        h4 {
          color: #000;
          font-weight: 600;
        }
      }
      .info2 {
        @include rect(100%, 18px);
        font-size: 12px;
        color: rgb(88, 92, 100);
        .ihas {
          float: left;
          width: 56px;
          height: 17px;
          border: 1px solid #fff;
          color: #fff;
          font-size: 12px;
          box-sizing: border-box;
          background-color:greenyellow;
          border-radius: 15%;
          margin-right: 8px;
        }
        b {
          float: left;
          font-size: 12px;
          margin-right: 8px;
          color: rgb(222, 61, 150);
        }
        span {
          display: inline-block;
          font-size: 12px;
        }
      }
    }
  }
}
.cart {
  width: 45px;
  position: fixed;
  z-index: 5;
  height: 45px;
  bottom: 48px;
  left: 10px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(25,29,38,.95);
}
.uptop {
  width: 45px;
  position: fixed;
  z-index: 5;
  height: 45px;
  bottom: 48px;
  right: 10px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(25,29,38,.95);
}
=======
  .van-search {
    padding: 5px 12px;
  }
  .van-nav-bar__title {
    max-width: 80%;
  }
  .van-nav-bar__left {
    left: 10px;
  }
  .van-nav-bar__right {
    bottom: 5px;
    right: 12px;
  }
  .backtop {
    position: fixed;
    right: 10px;
    bottom: 60px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: #fff;
  }
>>>>>>> 61d95511f5bb548966870409910cdf315f439697
</style>
